import { GithubOutlined } from "@ant-design/icons";

import { rootState } from "@/store";
import { usertype } from "@/store/reducers/home";
import React, { useEffect, useState } from "react";
import { shallowEqual, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import { useParams } from "react-router-dom";
import { Userpagewrap } from "./style";
import Usermenue from "./components/Usermenue";
import Accomplish from "./components/Accomplish";
import { getoneuserapi } from "@/apis/user";

export default function Userpage() {
  const params = useParams();
  const { user } = useSelector(
    (store: rootState) => ({
      user: store.home.user as usertype,
    }),
    shallowEqual
  );
  const [curuser, setCuruser] = useState<{
    username: string;
    avatar: string;
    birthday: string;
  }>();
  useEffect(() => {
    getoneuserapi(parseInt(params.id as string)).then((res: any) => {
      setCuruser(res.result);
    });
  }, [params.id]);
  return (
    <Userpagewrap>
      <div className="left">
        <div className="top">
          {curuser && (
            <div className="left">
              <img src={curuser.avatar} alt="" />
              <div className="username">
                <div className="name">{curuser.username}</div>
                <div className="birthday">{curuser.birthday}</div>
              </div>
            </div>
          )}
          <div className="right">
            <div className="three">
              <GithubOutlined />
              <span className="iconfont icon-xinlangweibo"></span>
              <span className="iconfont icon-wangluo"></span>
            </div>
            {params.id === "" + user.id && (
              <Link to="/edituser" className="edit">
                编辑个人资料
              </Link>
            )}
          </div>
        </div>
        <div className="content">
          <Usermenue></Usermenue>
        </div>
      </div>
      <div className="right">
        <Accomplish></Accomplish>
      </div>
    </Userpagewrap>
  );
}
